<!--

@file: Carousel01.vue
@author: pan
-->
<script setup lang="ts">
import { ref, computed } from 'vue'
defineOptions({ name: 'Carousel01.vue' })
const cardArr = new Array(6).fill(true).map((_, idx) => {
  return {
    key: idx,
    title: `卡片盒子${idx}`,
  }
})

const rotateY = ref(0)
const containerTransform = computed(() => `transform: rotateX(-4deg) rotateY(${rotateY.value}deg);`)
function onTouchSwipe(direction: any) {
  console.log('direction', direction, arguments)
  if (direction === 'left') {
    rotateY.value = rotateY.value - 60 * 2
  } else if (direction === 'right') {
    rotateY.value = rotateY.value + 60 * 2
  }
}
</script>

<template>
  <div class="wrapper" v-touch:swipe="onTouchSwipe">
    <div class="container" :style="containerTransform">
      <div class="item" v-for="cardInfo in cardArr" :style="`--item-idx: ${cardInfo.key}`">{{ cardInfo.title }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  /* border: 2px solid red; */
  margin: 100px auto;
  /* 透视属性，使得旋转效果更符合物理直觉 */
  perspective: 800px;
  background: lightgoldenrodyellow;
}
.container {
  /* background-color: yellowgreen; */
  width: 100%;
  height: 100%;
  /* 加入过渡效果，使得可以看到旋转的过程 */
  transition: transform ease 2s;
  position: relative;
  /* 使得子元素也有3d效果 */
  transform-style: preserve-3d;
  transform: rotateX(-4deg);
}
.container .item {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  /* transform: translateX(-50%); */
  /* 要呈圆形分布，那就要将卡片盒子旋转一定角度之后，再移动到圆的最外围，而如果要将卡片盒子均匀分布到圆上，每个卡片盒子的累加旋转角度就应该是 360°/卡片数量，所以第二个盒子的旋转角度为60° */
  /* 将卡片盒子从圆心位置，沿着z轴，移动200px(即：圆的半径)，移动到圆的最外围 */
  transform: rotateY(calc(var(--item-idx) * 60deg)) translateZ(200px);
}
// .wrapper:hover .container {
//   /* 鼠标移入时旋转，盒子360°旋转就会形成半径为200px的一个圆 */
//   transform: rotateX(-4deg) rotateY(-300deg);
// }
</style>
